<template>
 <div class="playList" v-show="isShowList">
   <div class="playWrapper">
     <div class="list-top">
       <div class="top-left">
         <div class="loops loop" @click="mode1" ref="modes"></div>
         <p v-if="this.mode === 0">循环播放</p>
         <p v-else-if="this.mode === 1">单曲播放</p>
         <p v-else-if="this.mode === 2">随机播放</p>
       </div>
       <div class="top-right">
         <div class="del" @click="delAll"></div>
       </div>
     </div>
     <div class="list-middle">
       <IscrollView ref="iscrollview">
         <ul ref="play">
           <li class="item" v-for="(value,index) in songs" :key="value.id" @click="selectMusic(index)">
             <div class="item-left">
               <div class="play" @click.stop="play" v-show="currentIndex === index"></div>
               <p>{{value.name}}</p>
             </div>
             <div class="item-right">
               <div class="favo" @click.stop="favorite(value)" :class="{'active':isFavorite(value)}"></div>
               <div class="close" @click.stop="del(index)"></div>
             </div>
           </li>
         </ul>
       </IscrollView>
     </div>
     <div class="list-bottom">
       <div class="guan">
         <p @click.stop="hidden">关闭</p>
       </div>
     </div>
   </div>
 </div>
</template>

<script>
import IscrollView from '../IscrollView'
import { mapActions, mapGetters } from 'vuex'
import modeType from '../../store/modeType'

export default {
  name: 'PlayList',
  components: {
    IscrollView
  },
  data: function () {
    return {
      isShow: false
    }
  },
  methods: {
    ...mapActions([
      'setplay',
      'setMode',
      'isshowList',
      'setdel',
      'setIndexs',
      'setFavoriteSong',
      'setFavoriteList',
      'sethistoryList'
    ]),
    play () {
      this.setplay(!this.isPlay)
    },
    show () {
      this.isShow = true
    },
    hidden () {
      this.isshowList(!this.isShowList)
    },
    mode1 () {
      if (this.mode === modeType.loop) {
        this.setMode(modeType.one)
      } else if (this.mode === modeType.one) {
        this.setMode(modeType.random)
      } else if (this.mode === modeType.random) {
        this.setMode(modeType.loop)
      }
    },
    del (index) {
      this.setdel(index)
    },
    delAll () {
      this.setdel()
    },
    selectMusic (index) {
      this.setIndexs(index)
    },
    favorite (song) {
      this.setFavoriteSong(song)
    },
    isFavorite (song) {
      const res = this.favoriteSong.find(function (value) {
        return song.id === value.id
      })
      return res !== undefined
    }
  },
  computed: {
    ...mapGetters([
      'isPlay',
      'mode',
      'isShowList',
      'songs',
      'currentIndex',
      'favoriteSong',
      'favoriteList',
      'historyList'
    ])
  },
  watch: {
    isPlay (newValue, oldValue) {
      if (newValue) {
        this.$refs.play.classList.add('active')
      } else {
        this.$refs.play.classList.remove('active')
      }
    },
    mode (newValue, oldValue) {
      if (newValue === modeType.loop) {
        this.$refs.modes.classList.remove('random')
        this.$refs.modes.classList.add('loop')
      } else if (newValue === modeType.one) {
        this.$refs.modes.classList.remove('loop')
        this.$refs.modes.classList.add('one')
      } else if (newValue === modeType.random) {
        this.$refs.modes.classList.remove('one')
        this.$refs.modes.classList.add('random')
      }
    },
    isShowList (newValue, oldValue) {
      if (newValue) {
        this.$refs.iscrollview.refresh()
      }
    },
    favoriteSong (newValue, oldValue) {
      window.localStorage.setItem('favoite', JSON.stringify(newValue))
    },
    historyList (newValue, oldValue) {
      window.localStorage.setItem('history', JSON.stringify(newValue))
    }
  },
  created () {
    const favoite = JSON.parse(window.localStorage.getItem('favoite'))
    if (favoite === null) { return }
    this.setFavoriteList(favoite)

    const history = JSON.parse(window.localStorage.getItem('history'))
    if (history === null) { return }
    this.sethistoryList(history)
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/css/variable";
  @import "../../assets/css/mixin";
  .playList{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .playWrapper{
      @include bg_sub_color();
      .list-top{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-left{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          .loops{
            width: 79px;
            height: 79px;
            &.loop{
              @include bg_img('../../assets/images/small_loop');
            }
            &.one{
              @include bg_img('../../assets/images/small_one');
            }
            &.random{
              @include bg_img('../../assets/images/small_shuffle');
            }
          }
          p{
            @include font_size($font_medium_s);
            @include font_color();
            margin-left: 20px;
          }
        }
        .top-right{
          .del{
            width: 84px;
            height: 84px;
            @include bg_img('../../assets/images/small_del')
          }
        }
      }
      .list-middle{
        height: 700px;
        overflow: hidden;
        ul{
          &.active{
            .item{
              .play{
                @include bg_img('../../assets/images/small_pause')
              }
            }
          }
        }
        .item{
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top:1px solid #ccc ;
          .item-left{
            display: flex;
            align-items: center;
            padding: 0 20px;
            .play{
              width: 75px;
              height: 75px;
              @include bg_img('../../assets/images/small_play');

            }
            p{
              margin-left: 30px;
              @include font_color();
              @include font_size($font_medium_s)
            }
          }
          .item-right {
            display: flex;
            align-items: center;
            .favo{
              width: 75px;
              height: 75px;
              @include bg_img('../../assets/images/small_un_favorite');
              &.active{
                @include bg_img('../../assets/images/small_favorite');
              }
            }
            .close{
              width: 75px;
              height: 75px;
              @include bg_img('../../assets/images/small_close')
            }
          }
        }
      }
      .list-bottom{
        width: 100%;
        .guan{
          width: 100%;
          height: 100px;
          @include bg_color();
          text-align: center;
          p{
            line-height: 100px;
            @include font_size($font_large);
            @include font_color();
          }
        }
      }
    }
  }

</style>
